<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据渲染</title>
    <style>
        table {
            width: 300px;
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<body>
<!--cellspacing：单元格之间的距离；cellpadding：单元边沿与其内容之间的空白距离-->
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <!--js渲染-->
    </tbody>
</table>
<script>
    //获取标签
    var tbody = document.querySelector('tbody')
    //需要渲染的数据
    var users = [
        {id: 1, name: '爱吃兽奶', age: 15},
        {id: 2, name: '小毛孩', age: 18},
        {id: 3, name: '坏肧', age: 20},
    ]

    //1.循环遍历获取users数据
    users.forEach(function (item){
        //这里的item就是数组中的每个对象
        console.log(item)

        //2.每个对象创建一个tr标签
        var tr = document.createElement('tr')

        //3.每个对象循环创建td便签将数据渲染进去

        //接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。
        for (var key in item){
            //3-1.创建td标签
            var td = document.createElement('td')
            //3-2.将数据放入td标签
            td.innerText=item[key]
            //3-3.td标签插入到tr标签内
            tr.appendChild(td)
        }

        //4.将tr插入tbody内
        tbody.appendChild(tr)
    })
</script>
</body>
</html>